<script setup>
import { reactive, ref, onMounted } from "vue";
import { getFeedback } from "@/api/index";
import { showFailToast, showSuccessToast, showDialog } from "vant";
import { useRouter } from 'vue-router';
const router = useRouter(); // 获取 router 实例
const query = ref(router.query); // 从路由参数中获取 ID
// console.log('query', query);
defineOptions({
  name: "Check"
});


// const mobile = ref('123')
// const code = ref('0ca503')
const mobile = ref('')
const code = ref('')
const data = ref({
  title: '',
  community: '',
  contacts: '',
  content: '',
  recontent: '',
  mobile: '',

})

const onSubmit = async (value) => {
  console.log('submit', value);
  try {
    //API 请求
    const response = await getFeedback(value);
    console.log(response);
    if (response.code == 1) {
      // showSuccessToast('查询成功');
      data.value = response.data

    } else {
      showFailToast(response.msg);
    }
  } catch (err) {
  } finally {
  }
}
function getUrlParams() {
  var url = window.location.href;
  var queryString = url.split('?')[1];
  var params = {};

  if (queryString) {
    var keyValuePairs = queryString.split('&');

    keyValuePairs.forEach(function (keyValuePair) {
      var keyValue = keyValuePair.split('=');
      var key = decodeURIComponent(keyValue[0]);
      var value = decodeURIComponent(keyValue[1]) || '';
      params[key] = value;
    });
  }
  return params;
}

// 组件挂载时调用多个方法
onMounted(async () => {
  console.log('onMounted');
  const urlParams = getUrlParams()
  console.log(urlParams);
  if (urlParams.mobile && urlParams.code) {
    mobile.value = urlParams.mobile
    code.value = urlParams.code
    onSubmit(urlParams)
  }


});
</script>
<template>
  <div style="margin-top: 20px;">
    <van-form @submit="onSubmit" label-width='65' class="form">
      <van-cell-group inset>
        <div class="pl-[12px] border-l-[3px] border-[color:#41b883] ml-[12px] mb-[12px]">
          <van-row>
            <van-col span="">
              <div class="font-bold text-[18px] my-[4px]">我的反馈</div>
            </van-col>
          </van-row>
        </div>
        <van-field v-model="mobile" name="mobile" label="手机号" placeholder="请输入手机号" required :rules="[
          { required: true, message: '请填写' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }]" />
        <van-field v-model="code" name="code" label="查询码" placeholder="请输入查询码" required
          :rules="[{ required: true, message: '请填写' }]" />
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            查询
          </van-button>
        </div>
      </van-cell-group>
    </van-form>
    <br>
    <van-cell-group inset v-if="data.title != ''">
      <van-form label-width='65'>
        <van-field label="标题：" autosize type="textarea" :model-value="data.title" readonly />
        <van-field label="姓名：" :model-value="data.contacts" readonly />
        <van-field label="手机号：" :model-value="data.mobile" readonly />
        <van-field label="小区：" :model-value="data.community" readonly />
        <van-field label="内容：" autosize type="textarea" :model-value="data.content" readonly />
        <van-field label="反馈：" autosize type="textarea" :model-value="data.recontent" readonly />

      </van-form>
      <!-- <van-cell title="" :value="data.contacts" />
      <van-cell title="" :value="data.mobile" />
      <van-cell title="" :value="data.community" />
      <van-cell title="" :value="data.content" />
      <van-cell title="" :value="data.recontent" /> -->
    </van-cell-group>

  </div>
</template>
<style scoped>
::v-deep .form .van-cell {
  background: #fff;
  line-height: 30px;
}

::v-deep .form .van-field__control {
  padding-left: 5px;
  border: 1px solid #b4afaf;
  border-radius: 4px;
}
</style>
